<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <title>医院信息</title>
    <%
        /********** 保存网站的基本路径 ***********/
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
        //将该路径地址缓存到 session中 ,例如：http://localhost:8090/tjnu_ssh_1128/
        session.setAttribute("mybasePath", basePath);
    %>
    <jsp:include page="../include/headtag.jsp" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">

    <link rel="stylesheet" href="${mybasePath}assets/layui/css/layui.css"  media="all">

    <!-- <link rel="stylesheet"
        href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
    <link rel="stylesheet"
          href="${mybasePath}assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${mybasePath}assets/css/form-elements.css">
    <link rel="stylesheet" href="${mybasePath}assets/css/style.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body style="height: 80%; width: 80%; margin-left:auto">
<jsp:include page="../include/head1.jsp" />
<jsp:include page="../include/menu1.jsp" />
<div class="layui-bg-gray" style="padding: 30px;margin-top:60px ">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <div id="container" style="width: 1000px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <div id="container1" style="width: 1000px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${mybasePath}assets/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${mybasePath}assets/echart/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    option = {
        color: ['#1890ff', '#1f9'],
        grid: {
            top: '25%',
            right: '5%',
            left: '5%',
            bottom: '10%',
        },
        legend: {
            top: 5,
            left: 250,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                fontSize: 14,
                color: 'red',
                padding: [3, 8, 0, 2],
            },
            data: ['增长率', '数值'],
        },

        xAxis: [
            {
                type: 'category',
                data: [<c:forEach var="item" items="${test}">
                    "${item}",
                    </c:forEach> ],
                axisLine: {
                    show: false,
                },

                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    color: 'red',
                    interval: 0,
                    textStyle: {
                        fontSize: 10,
                    },
                    fontFamily: 'LCDEF',
                },
            },
        ],
        yAxis: [
            {
                name: '单位：个',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                    },
                },
                type: 'value',
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#384267',
                    },
                },
                axisLabel: {
                    color: '#cccccc',
                    fontSize: '10',
                },
            },
            {
                type: 'value',
                name: '',
                position: 'right',
                axisLabel: {
                    formatter: '{value} %',
                    color: '#27719F',
                },
                max: 100,
                splitLine: {
                    show: false,
                },
                axisPointer: {
                    show: true,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#27719F',
                    },
                },
            },
        ],
        series: [
            {
                type: 'bar',
                name: '日期',
                barWidth: '20',
                data: [<c:forEach var="item" items="${test1}">
                    ${item},
                    </c:forEach> ],
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: '#42B7FD',
                            },
                            {
                                offset: 1,
                                color: '#3299FF',
                            },
                        ]),
                    },
                },
            },

        ],
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

</script>
<script type="text/javascript">
    var dom = document.getElementById("container1");
    var myChart = echarts.init(dom);


    var event=[];
    var events;

    $.ajax({
        url:'${pageContext.request.contextPath}/uni/getcount1',
        dataType:"json",
        success:function(data){
            console.log(data)

            for(var i=0;i<data.length;i++){
                event.push({
                    value:data[i].countoffice,
                    name:data[i].officesName
                });

    }
            events=JSON.stringify(event)
            option = {
                title: {
                    text: '所有科室订单占比',
                    subtext: '百分比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data:event,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }
    })




</script>
</body>
</html>